<template>
  <div class="back">
    <div class="bear"></div>
    <div class="mon">
      <div class="mountain1"></div>
      <div class="mountain2"></div>
      <div class="mountain3"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: "BearRun"
};
</script>
<style lang="scss" scoped>
/* * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */

/* body {
  background-color: #ccc;
} */

/* .back{
  position: fixed;
  z-index: -1;
} */

.bear {
  position: absolute;
  bottom: 50px;
  left: 0;
  z-index: 4;
  width: 200px;
  height: 100px;
  background: url(./images/bear.png) no-repeat;
  animation: bear 0.7s steps(8) infinite, move 5s forwards;
}

/* .bear */
@keyframes bear {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -1600px 0;
  }
}

@keyframes move {
  0% {
    left: 0;
  }

  100% {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* bear完 */

/* mountain */
.mon {
  position: relative;
  width: 100%;
  height: 100vh;
  /* overflow: hidden; */
}

.mountain1 {
  position: absolute;
  bottom: 0px;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 336px;
  background: url(./images/mountain-1.png);
  /* background-size: auto 100%; */
  animation: moving 100s linear 0.8s infinite normal none;
}

.mountain2 {
  position: absolute;
  bottom: 75px;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 336px;
  background: url(./images/mountain-2.png);
  /* background-size: auto 100%; */
  animation: moving 160s linear 0.8s infinite normal none;
}

.mountain3 {
  position: absolute;
  bottom: 200px;
  left: 0;
  width: 100%;
  height: 336px;
  background: url(./images/mountain-3.png);
  /* background-size: auto 100%; */
  animation: moving 360s linear 0.8s infinite normal none;
}

@keyframes moving {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -3840px 0;
  }
}
</style>
